<template>
  <div class="home">
    <el-alert title="欢迎访问jxf-admin- Vue 3.x + Vue-Router 4.x + ElementPlus 2.x + pinia 后台管理系统" type="success" />
    <div class="tofu-cubes">
      <el-row :gutter="10">
        <el-col :span="12" :md="6">
          <div class="cube" style="background-color: #95d475;">今日访问人数</div>
        </el-col>
        <el-col :span="12" :md="6">
          <div class="cube" style="background-color: #eebe77;">订单数量</div>
        </el-col>
        <el-col :span="12" :md="6">
          <div class="cube" style="background-color: #f89898;">github Star</div>
        </el-col>
        <el-col :span="12" :md="6">
          <div class="cube" style="background-color: #a0cfff;">关注人数</div>
        </el-col>
      </el-row>
    </div>
    <div id = 'div1' ref="div1" style="height: 500px;"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue";
// 如果需要不同的主题风格，可以这样用
// import T from './echarts-theme-T.js';
// echarts.registerTheme('T', T);
let option = {
  legend: {
    // Try 'horizontal'
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

onMounted(() => {
  var myChart = echarts.init(document.getElementById("div1")); // echarts 必须使用原生获取dom节点，document.getElementById
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
});
</script>

<style lang="scss" scoped>
.scroll-test:hover{
  width: 500px;
}
.home{
  padding: 15px;
  .tofu-cubes{
    .cube{
      margin-top: 10px;
      padding: 0 10px;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      color: #fff;
      background-color: antiquewhite;
      border-radius: 5px;
    }
    .cube:nth-child(1){
      background-color: #95d475;
    }
    .cube:nth-child(2){
      background-color:  #eebe77;
    }
    .cube:nth-child(3){
      background-color:  #f89898;
    }
    .cube:nth-child(4){
      background-color:  #a0cfff;
    }
    .cube:nth-child(5){
      background-color:  #b1b3b8;
    }
  }
}

</style>
